<template>
    <div class="shareItem">
      <div class="title van-ellipsis" v-html="item.title" @click="goInfo"></div>
      <div class="content van-multi-ellipsis--l2">{{item.content}}</div>
      <div class="other">
        <img :src="$baseUrl + item.author.avatar" class="item1" alt="">
        <div class="item2">{{item.author.nickname}}</div>
        <div class="item3">{{item.updated_at | formatTime}}</div>
        <i class="item4 iconfont">&#xe65b;</i>
        <div class="item5">{{item.article_comments}}</div>
        <i class="item6 iconfont">&#xe639;</i>
        <div class="item6">{{item.star}}</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'shareItem',
  props: ['item'],
  methods: {
    goInfo () {
      this.$router.push('/home/shareInfo/' + this.item.id + '?path=' + this.$route.fullPath)
    }
  }
}
</script>

<style lang="less" scoped>
  .shareItem {
    .title {
      padding-top: 16px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #181a39;
      line-height: 23px;
      letter-spacing: 0px;
    }
    .content {
      margin: 12px 0 14px;
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #545671;
      line-height: 19px;
      letter-spacing: 0px;
    }
    .other {
      padding: 12px 0 25px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #b4b4bd;
      line-height: 17px;
      letter-spacing: 0px;
      .item1 {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .item2 {
        flex: 1;
        color: #545671;
      }
      .item3 {
        margin-right: 20px;
      }
      .item5 {
        margin-left: 7px;
        margin-right: 23px;
      }
      .item6 {
        margin-right: 10px;
      }
    }
  }
</style>
